<template>
<div>
<div style="position: sticky;top:0;left:0;z-index: 9999">
  <van-nav-bar title="商品列表" left-text="返回" left-arrow
               @click-left="onClickLeft"
               @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
</div>
      <div v-for="(item,index) in list.data" :key="index" style="border:4px #ccc solid">
        <div class="box">
        <div>
          <img style="width: 100%;border:1px silver solid;border-radius:20px;overflow: hidden" :src="item.goods_big_logo==''?url:item.goods_big_logo" alt="">
        </div>
          <div>
            <div class="name">{{item.goods_name}}</div>
            <div class="price">￥: <span class="fon">{{item.goods_price}}</span></div>
          </div>
          <div>
            <van-button type="warning" round size="large" @click="getitem(item.goods_id)">立即购买</van-button>
          </div>
        </div>
      </div>
</div>
</template>

<script>
import {useRoute,useRouter}from "vue-router"
import { reactive} from "vue"
import http from "../api/http";
export default {
  name: "list",
  setup(){
    const Route=useRoute();
    const router=useRouter()
    const onClickLeft = () => history.back();
    const onClickRight = () =>router.push('/serch');
    const getitem=(id)=>{
      router.push({
        path:'./details',
        query:{
          id
        }
      })
    }
    const url="http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000721208036_1_800x800.jpg"
    const list=reactive({
      data:[],
    });
    http('goods/search?query='+Route.query.name).then(res=>{
      list.data=res.message['goods']
    })
    return{
      getitem,
      router,
      onClickLeft,
      onClickRight,
      list,url
    }
  }
}
</script>

<style scoped lang="less">
.box{.fon{color:red};.price{margin-bottom:10px};display: flex;justify-content:space-between;flex-direction: column;padding:20px;box-sizing: border-box;.name{text-indent:2rem;margin:10px 0}}
</style>